<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div class="nameList_box">
    <div style="display: flex;flex-direction: row-reverse;margin-bottom: 20px;">
      <button class="buttonStyle" @click="shareDialogVisible = true;">分享名单</button>
    </div>
    <div class="tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick" v-if="isRefreshTag">
        <el-tab-pane label="初选艺人名单" name="zero">
          <div class="edit-button" v-if="status == '1'">
            <button class="buttonStyle" @click="isEdit(4)">{{isPrimaryEdit ? '取消' : '编辑'}}</button>
            <button class="buttonStyle" @click="onAllSelect()" v-if="isPrimaryEdit">全选</button>
            <button class="buttonStyle" @click="onIntoProject(4,1)" v-if="isPrimaryEdit">移动到已邀请</button>
            <!--<button class="buttonStyle" @click="onIntoProject(4,2)" v-if="isPrimaryEdit">移动到已报名</button>-->
            <!--<button class="buttonStyle" @click="onIntoProject(4,3)" v-if="isPrimaryEdit">移动到已确定</button>-->
          </div>
          <div class="first_box">
            <div class="first" v-for='item, index in primaryList' @click="pushToDetail(item.uid)">
              <div class="first_img">
                <img :src="item.cover"/>
              </div>
              <img class="edit-img" @click.stop="onAddSelect(4,item.uid)" v-if="isPrimaryEdit&&!item.isClick"
                   src="../../assets/click2_normal.png">
              <img class="edit-img" @click.stop="onDeleteSelect(4,item.uid)" v-if="isPrimaryEdit&&item.isClick"
                   src="../../assets/click2_selected.png">
              <div class="first_text">
                <div class="text_one">
                  <div class="text_one_one">
                    <span style="font-size: 20px">{{item.realName}}</span>
                    <span>{{item.sex == 1 ? '男' : '女'}}</span>
                  </div>
                </div>
                <p>职业：{{item.jobList}}</p>
                <p>地址：{{item.cityList}}</p>
                <p>标签：{{item.typeList}}</p>
                <div class="split"></div>
                <div class="bottom">
                  <!--<span @click.stop="onToVisit(item.uid,4,1)">移动到已邀请</span>-->
                  <span class="remove" @click.stop="onRemoveActorDialog(item.uid,4)">移除</span>
                </div>
              </div>
              <div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已邀请的艺人" name="first">
          <!--<div class="edit-button">-->
          <!--<button class="buttonStyle" @click="isEdit(1)">{{isInviteEdit ? '取消' : '编辑'}}</button>-->
          <!--<button class="buttonStyle" @click="onIntoProject(1,2)" v-if="isInviteEdit">移动到已报名</button>-->
          <!--<button class="buttonStyle" @click="onIntoProject(1,3)" v-if="isInviteEdit">移动到已确定</button>-->
          <!--</div>-->
          <div class="first_box">
            <div class="first" v-for='item, index in inviteList' @click="pushToDetail(item.uid)">
              <div class="first_img">
                <img :src="item.cover"/>
              </div>
              <img class="edit-img" @click.stop="onAddSelect(1,item.uid)" v-if="isInviteEdit&&!item.isClick"
                   src="../../assets/click2_normal.png">
              <img class="edit-img" @click.stop="onDeleteSelect(1,item.uid)" v-if="isInviteEdit&&item.isClick"
                   src="../../assets/click2_selected.png">
              <div class="first_text">
                <div class="text_one">
                  <div class="text_one_one">
                    <span style="font-size: 20px">{{item.realName}}</span>
                    <span>{{item.sex == 1 ? '男' : '女'}}</span>
                  </div>
                </div>
                <p>职业：{{item.jobList}}</p>
                <p>地址：{{item.cityList}}</p>
                <p>标签：{{item.typeList}}</p>
                <div class="split"></div>
                <div class="bottom">
                  <!--<span @click.stop="onToVisit(item.uid,1,2)">移动到已报名</span>-->
                  <span class="remove" @click.stop="onRemoveActorDialog(item.uid,1)">移除</span>
                </div>
              </div>
              <div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已报名的艺人" name="second">
          <!--<div class="edit-button">-->
          <!--<button class="buttonStyle" @click="isEdit(2)">{{isApplyEdit ? '取消' : '编辑'}}</button>-->
          <!--<button class="buttonStyle" @click="onIntoProject(2,3)" v-if="isApplyEdit">移动到已确定</button>-->
          <!--</div>-->
          <div class="first_box">
            <div class="first" v-for='item, index in applyList' @click="pushToDetail(item.uid)">
              <div class="first_img">
                <img :src="item.cover"/>
              </div>
              <img class="edit-img" @click.stop="onAddSelect(2,item.uid)" v-if="isApplyEdit&&!item.isClick"
                   src="../../assets/click2_normal.png">
              <img class="edit-img" @click.stop="onDeleteSelect(2,item.uid)" v-if="isApplyEdit&&item.isClick"
                   src="../../assets/click2_selected.png">
              <div class="first_text">
                <div class="text_one">
                  <div class="text_one_one">
                    <span style="font-size: 20px">{{item.realName}}</span>
                    <span>{{item.sex == 1 ? '男' : '女'}}</span>
                  </div>
                </div>
                <p>职业：{{item.jobList}}</p>
                <p>地址：{{item.cityList}}</p>
                <p>标签：{{item.typeList}}</p>
                <div class="split"></div>
                <div class="bottom">
                  <!--<span @click.stop="onToVisit(item.uid,2,3)">移动到已确定</span>-->
                  <!--<span class="remove" @click.stop="onRemoveActorDialog(item.uid,2)">移除</span>-->
                </div>
              </div>
              <div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="项目确定的艺人" name="third">
          <div class="first_box">
            <div class="first" v-for='item, index in sureList' @click="pushToDetail(item.uid)">
              <div class="first_img">
                <img :src="item.cover"/>
              </div>
              <div class="first_text">
                <div class="text_one">
                  <div class="text_one_one">
                    <span style="font-size: 20px">{{item.realName}}</span>
                    <span>{{item.sex == 1 ? '男' : '女'}}</span>
                  </div>
                </div>
                <p>职业：{{item.jobList}}</p>
                <p>地址：{{item.cityList}}</p>
                <p>标签：{{item.typeList}}</p>
                <p>是否参加：{{item.isJoin == 1 ? '参加' : '不参加'}}</p>
                <div class="split"></div>
                <div class="bottom">
                  <span v-if="item.isJoin == 2" @click.stop="onShowDetail(item.actorNote)">查看原因</span>
                  <!--<span class="remove" @click.stop="onRemoveActorDialog(item.uid,3)">移除</span>-->
                </div>
              </div>
              <div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="button" v-show="activeName0">
        <el-button type="primary" v-if="status == '1'" @click="onVisitActors(4)">去邀请</el-button>
      </div>
      <div class="button" v-show="activeName1">
        <el-button type="primary" v-if="status == '1'" @click="onVisitActors(1)">去邀请</el-button>
        <el-button type="primary" v-if="status == '1'" @click="onSureActorsList()">请管理员联系</el-button>
      </div>
      <div class="button" v-show="activeName2">
        <!--<el-button type="primary" @click="onVisitActors(2)">去邀请</el-button>-->
      </div>
      <div class="button" v-show="activeName3">
        <!--<el-button type="primary" @click="onVisitActors(3)">去邀请</el-button>-->

      </div>
    </div>
    <el-dialog title="分享" :visible.sync="shareDialogVisible" width="40%">
      <div class="dialog_look">
        <span style="width: 65%;">{{shareUrl}}</span>
        <el-button style="margin-left: 80%;" v-clipboard:copy="shareUrl" v-clipboard:success="copySuccess">复制链接
        </el-button>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="dialog_text" @click="shareDialogVisible = false">
          <span>确认</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        shareUrl: 'https://www.starnests.com/#/shareNameList',
        shareDialogVisible: false,
        activeName: "zero", //second third
        activeName0: true,
        activeName1: false,
        activeName2: false,
        activeName3: false,
        dialogVisible: false,
        primaryList: [],
        isPrimaryEdit: false,
        isInviteEdit: false,
        isApplyEdit: false,
        inviteList: [],
        applyList: [],
        sureList: [],
        projectID: '',
        projectInfo: {},
        isRefreshTag: true,
        mySelectActorsList: [], //已选择的艺人id数组
        actorsIdSet: new Set(),
        status: 1
      };
    },
    mounted() {
      let projectID = this.$route.query.projectID;
      this.status = this.$route.query.status;
      if (typeof projectID !== "undefined" && projectID !== null && projectID !== "") {
        this.projectID = projectID;
      }
      this.getProjectDetail();
      this.getPrimaryList();
      this.shareUrl += '?projectID=' + this.projectID;
    },
    methods: {
      handleClick(tab, event) {
        this.actorsIdSet.clear();
        if (this.activeName == "zero") {
          this.activeName0 = true;
          this.activeName1 = false;
          this.activeName3 = false;
          this.activeName2 = false;
          this.getPrimaryList();
        }
        if (this.activeName == "first") {
          this.activeName0 = false;
          this.activeName1 = true;
          this.activeName3 = false;
          this.activeName2 = false;
          this.getInviteList();
        }
        if (this.activeName == "second") {
          this.activeName0 = false;
          this.activeName2 = true;
          this.activeName1 = false;
          this.activeName3 = false;
          this.getApplyList();
        }
        if (this.activeName == "third") {
          this.activeName0 = false;
          this.activeName3 = true;
          this.activeName2 = false;
          this.activeName1 = false;
          this.getSureList();
        }
        console.log(tab, event);
      },
      /**
       * 获取初选列表
       *
       */
      getPrimaryList() {
        let self = this;
        let obj = {
          token: self.globalData.token,
          projectID: this.projectID,
          projectStatus: 4,
        };
        self.$fetch("/User/getUserProjectSiginUp", obj).then(res => {
          if (res.code === "200") {
            self.primaryList = res.data.userList;
          } else {
            self.$message.error(res.message);
          }
        });
      },

      /**
       * 获取项目详情
       */
      getProjectDetail() {
        let self = this;
        let obj = {
          projectID: this.projectID,
        };
        self.$fetch("/Category/getProjectInfo", obj).then(res => {
          if (res.code === "200") {
            self.projectInfo = res.data.projectInfo;
          } else {
            self.$message.error(res.message);
          }
        });
      },
      /**
       * 获取邀请列表
       *
       */
      getInviteList() {
        let self = this;
        let obj = {
          token: self.globalData.token,
          projectID: this.projectID,
          projectStatus: 1,
        };
        self.$fetch("/User/getUserProjectSiginUp", obj).then(res => {
          if (res.code === "200") {
            self.inviteList = res.data.userList;
          } else {
            self.$message.error(res.message);
          }
        });
      },
      /**
       * 获取邀请列表
       *
       */
      getApplyList() {
        let self = this;
        let obj = {
          token: self.globalData.token,
          projectID: this.projectID,
          projectStatus: 2,
        };
        self.$fetch("/User/getUserProjectSiginUp", obj).then(res => {
          if (res.code === "200") {
            self.applyList = res.data.userList;
          } else {
            self.$message.error(res.message);
          }
        });
      },
      /**
       * 初选名单可以全选
       * */
      onAllSelect() {
        for (let i = 0; i < this.primaryList.length; i++) {
          //更新tableData中的数据
          this.primaryList[i].isClick = true;
          this.actorsIdSet.add(this.primaryList[i].uid);
        }
        this.isRefreshTag = false;
        this.isRefreshTag = true;
      },
      /**
       * 获取邀请列表
       *
       */
      getSureList() {
        let self = this;
        let obj = {
          token: self.globalData.token,
          projectID: this.projectID,
          projectStatus: 3,
        };
        self.$fetch("/User/getUserProjectSiginUp", obj).then(res => {
          if (res.code === "200") {
            self.sureList = res.data.userList;
          } else {
            self.$message.error(res.message);
          }
        });
      },
      /**
       * 跳转到艺人详情
       *
       */
      pushToDetail(uid) {
        let routeData = this.$router.resolve({
          path: "/newArtistDetail",
          query: {uid: uid}
        });
        window.open(routeData.href, '_blank');
      },
      /**
       * 名单类型：1已邀请;2已报名;3已确定
       */
      onVisitActors(projectStatus) {
        var columnCID = '1';
        if (this.projectInfo.uid !== sessionStorage.getItem("uid")) {
          columnCID = '2';
        } else {
          columnCID = '1';
        }
        this.$router.push({
          path: '/home',
          query: {projectID: this.projectID, projectStatus: projectStatus, columnCID: columnCID}
        });
      },
      /**
       * 移除艺人弹窗
       * */
      onRemoveActorDialog(actorUid, projectStatus) {
        let self = this;
        let message = '';
        if (projectStatus === 4) {
          message = '是否将此艺人从项目移除？';
        } else if (projectStatus === 1) {
          message = '是否将此艺人从已邀请名单移除？';
        } else if (projectStatus === 2) {
          message = '是否将此艺人从已报名名单移除？';
        } else {
          message = '是否将此艺人从已确定名单移除？';
        }
        this.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.onRemoveActor(actorUid, projectStatus);
        }).catch(() => {

        });
      },
      /**
       * 项目名单移除 确定移除到报名  报名移除到邀请  邀请移除项目
       */
      onRemoveActor(actorUid, projectStatus) {
        let self = this;
        let obj = {
          token: self.globalData.token,
          actorUid: actorUid,
          projectID: this.projectID,
          projectStatus: projectStatus,
        };
        self.$fetch("/User/deleteUserProjectSiginUp", obj).then(res => {
          if (res.code === "200") {
            if (projectStatus === 4) {
              self.getPrimaryList();
            } else if (projectStatus === 1) {
              self.getInviteList();
            } else if (projectStatus === 2) {
              self.getApplyList();
            } else {
              self.getSureList();
            }
          } else {
            self.$message.error(res.message);
          }
        });
      },
      /**
       * 移动
       */
      onToVisit(uid, nowStatus, projectStatus) {
        let self = this;
        let obj = {
          token: this.globalData.token,
          actorUid: uid,
          projectID: this.projectID,
          projectStatus: projectStatus
        };
        self.$post("/User/createUserProjectSiginUp", obj).then(res => {
          if (res.code === "200") {
            console.log(res);
            this.$message({
              type: 'success',
              message: '移动成功!'
            });
            if (nowStatus === 4) {
              self.getPrimaryList();
            } else if (nowStatus === 1) {
              self.getInviteList();
            } else if (nowStatus === 2) {
              self.getApplyList();
            }
            self.isPrimaryEdit = false;
            self.isInviteEdit = false;
            self.isApplyEdit = false;
          } else {
            self.$message.error(res.message);
          }
          this.visit = false;
        });
      },
      /**
       *
       */
      onSureActorsList() {
        let self = this;
        let actorUid = '';
        let obj = {
          token: self.globalData.token,
          actorUid: actorUid,
          projectID: this.projectID,
          projectStatusType: '3',
        };
        self.$fetch("/User/updateProjectStatus", obj).then(res => {
          if (res.code === "200") {
            this.$message({
              type: 'success',
              message: '以为您联系管理员!'
            });
          } else {
            self.$message.error(res.message);
          }
        });
      },
      /**
       * 显示不参加原因
       * @param detail 原因
       */
      onShowDetail(detail) {
        this.$confirm(detail, '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        }).then(() => {
        }).catch(() => {

        });
      },
      isEdit(nowStatus) {
        if (nowStatus === 4) {
          this.isPrimaryEdit = !this.isPrimaryEdit;
          if (!this.isPrimaryEdit) {
            this.actorsIdSet.clear();
          }
        } else if (nowStatus === 1) {
          this.isInviteEdit = !this.isInviteEdit;
          if (!this.isInviteEdit) {
            this.actorsIdSet.clear();
          }
        } else {
          this.isApplyEdit = !this.isApplyEdit;
          if (!this.isApplyEdit) {
            this.actorsIdSet.clear();
          }
        }
      },
      /**
       * 选择艺人
       *
       */
      onAddSelect(nowStatus, id) {
        this.actorsIdSet.add(id);
        if (nowStatus === 4) {
          for (let i = 0; i < this.primaryList.length; i++) {
            if (this.primaryList[i].uid === id) {
              //更新tableData中的数据
              this.primaryList[i].isClick = true;
              this.isRefreshTag = false;
              this.isRefreshTag = true;
              break;
            }
          }
        } else if (nowStatus === 1) {
          for (let i = 0; i < this.inviteList.length; i++) {
            if (this.inviteList[i].uid === id) {
              //更新tableData中的数据
              this.inviteList[i].isClick = true;
              this.isRefreshTag = false;
              this.isRefreshTag = true;
              break;
            }
          }
        } else if (nowStatus === 2) {
          for (let i = 0; i < this.applyList.length; i++) {
            if (this.applyList[i].uid === id) {
              //更新tableData中的数据
              this.applyList[i].isClick = true;
              this.isRefreshTag = false;
              this.isRefreshTag = true;
              break;
            }
          }
        }
        console.log(this.actorsIdSet);
      },
      /**
       * 删除艺人
       *
       * */
      onDeleteSelect(nowStatus, id) {
        this.actorsIdSet.delete(id);
        if (nowStatus === 4) {
          for (let i = 0; i < this.primaryList.length; i++) {
            if (this.primaryList[i].uid === id) {
              this.primaryList[i].isClick = false;
              this.isRefreshTag = false;
              this.isRefreshTag = true;
              break;
            }
          }
        } else if (nowStatus === 1) {
          for (let i = 0; i < this.inviteList.length; i++) {
            if (this.inviteList[i].uid === id) {
              this.inviteList[i].isClick = false;
              this.isRefreshTag = false;
              this.isRefreshTag = true;
              break;
            }
          }
        } else if (nowStatus === 2) {
          for (let i = 0; i < this.applyList.length; i++) {
            if (this.applyList[i].uid === id) {
              this.applyList[i].isClick = false;
              this.isRefreshTag = false;
              this.isRefreshTag = true;
              break;
            }
          }
        }
        console.log(this.actorsIdSet);
      },
      /**
       * 选择的艺人生成数组
       */
      onSelectActorsList() {
        this.mySelectActorsList = [];
        for (let x of this.actorsIdSet) { // 遍历选中的演员set
          this.mySelectActorsList.push(x);
        }
      },
      onIntoProject(nowStatus, projectStatus) {
        this.onSelectActorsList();
        console.log(this.mySelectActorsList);
        if (this.mySelectActorsList.length <= 0) {
          this.$message({
            type: 'error',
            message: '请选择艺人!'
          });
          return;
        }
        this.onToVisit(this.mySelectActorsList.join(','), nowStatus, projectStatus);
      },
      copySuccess() {
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      },
    }
  };
</script>

<style lang="less" scoped>
  .dialog_look {
    word-wrap: break-word;
  }

  .tabs {
    position: relative;
  }

  .button {
    position: absolute;
    top: 0px;
    right: 0px;
  }

  .nameList_box {
    width: 80%;
    margin: auto;
    font-size: 12px;
    .first_box {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      /*justify-content: space-between;*/
      margin-top: 20px;
      .first {
        position: relative;
        margin-top: 20px;
        margin-left: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 31%;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 3px 13px 0px rgba(0, 0, 0, 0.1);
        .first_img {
          width: 40%;
          position: relative;
          top: -10px;
          left: -10px;
          height: auto;
          img {
            top: -10px;
            left: -10px;
            height: auto;
            width: 100%;
            border-radius: 10px;
          }
        }
        .edit-img {
          position: absolute;
          width: 20px;
          left: -6px;
          top: -6px;
          height: auto;
        }
        .first_text {
          width: 60%;
          height: 100%;
          display: flex;
          flex-direction: column;
          .text_one {
            padding: 10px 15px 0px 0px;
            // width: 100%;
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: space-between;
            img {
              width: 18px;
              height: auto;
            }
            .text_one_one {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
            }
          }
          .text_two {
            padding: 10px 15px 0px 0px;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
          }
        }
        .out {
          border-top: 1px solid #f0f0f0;
          width: 100%;
          height: 36px;
          padding-right: 15px;
          text-align: right;
          line-height: 30px;
        }
        .split {
          width: 94%;
          height: 1px;
          background-color: #f2f2f2;
        }
      }
      .bottom {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        padding: 10px 20px;
        .move {

        }

        .remove {
          padding-left: 10px;
          color: #b3302e;
        }
      }
    }
  }

  p {
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 1;
    overflow: hidden;
    padding-right: 10px;
    text-overflow: ellipsis;
  }

  .buttonStyle {
    padding: 0px 20px;
    background-color: #bd2f2e;
    color: white;
    height: 30px;
    border-radius: 4px;
  }

  .edit-button {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
</style>
